<template>
  <div class="home-page">
    <!-- 导航栏 -->
    <nav class="navbar" :class="{ 'navbar-scrolled': isScrolled }">
      <div class="nav-container">
        <div class="nav-logo">
          <div class="logo-icon">
            <div class="dna-helix-mini">
              <div class="dna-strand-mini" v-for="i in 8" :key="i"></div>
            </div>
          </div>
          <span class="logo-text">BioMed</span>
        </div>
        <div class="nav-menu">
          <a href="#home" class="nav-link" :class="{ active: currentSection === 0 }">首页</a>
          <a href="#about" class="nav-link" :class="{ active: currentSection === 1 }">关于我们</a>
          <a href="#services" class="nav-link" :class="{ active: currentSection === 2 }">服务</a>
          <a href="#research" class="nav-link" :class="{ active: currentSection === 3 }">研究</a>
          <a href="#contact" class="nav-link" :class="{ active: currentSection === 4 }">联系</a>
        </div>
      </div>
    </nav>

    <!-- 首页章节 -->
    <section id="home" class="hero-section" data-section="home">
      <div class="hero-background">
        <div class="floating-particles">
          <div class="particle" v-for="i in 20" :key="i"></div>
        </div>
        <div class="gradient-overlay"></div>
      </div>
      <div class="hero-content">
        <div class="hero-text">
          <h1 class="hero-title">
            <span class="title-line">前沿生物医学</span>
            <span class="title-line">科技创新</span>
          </h1>
          <p class="hero-subtitle">
            致力于推动生物医学领域的技术创新，为人类健康创造更美好的未来
          </p>
          <div class="hero-actions">
            <button class="btn-primary" @click="scrollToSection('about')">
              了解更多
            </button>
            <button class="btn-secondary" @click="scrollToSection('services')">
              我们的服务
            </button>
          </div>
        </div>
        <div class="hero-visual">
          <div class="molecular-structure">
            <div class="molecule" v-for="i in 12" :key="i"></div>
          </div>
        </div>
      </div>
      <div class="scroll-indicator">
        <div class="scroll-arrow"></div>
      </div>
    </section>

    <!-- 关于我们章节 -->
    <section id="about" class="about-section" data-section="about">
      <div class="section-container">
        <div class="section-header">
          <h2 class="section-title">关于我们</h2>
          <p class="section-subtitle">专业的生物医学研究团队</p>
        </div>
        <div class="about-content">
          <div class="about-text">
            <h3>使命与愿景</h3>
            <p>
              我们是一家专注于生物医学技术创新的研究机构，致力于通过前沿科技手段，
              解决人类健康领域的重大挑战。我们的团队由来自全球顶尖院校的科学家组成，
              在基因治疗、细胞治疗、药物研发等领域拥有丰富的经验。
            </p>
            <div class="stats-grid">
              <div class="stat-item">
                <div class="stat-number">15+</div>
                <div class="stat-label">年研究经验</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">50+</div>
                <div class="stat-label">专业团队</div>
              </div>
              <div class="stat-item">
                <div class="stat-number">100+</div>
                <div class="stat-label">研究项目</div>
              </div>
            </div>
          </div>
          <div class="about-visual">
            <div class="lab-scene">
              <div class="microscope"></div>
              <div class="test-tubes">
                <div class="tube" v-for="i in 6" :key="i"></div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 服务章节 -->
    <section id="services" class="services-section" data-section="services">
      <div class="section-container">
        <div class="section-header">
          <h2 class="section-title">我们的服务</h2>
          <p class="section-subtitle">全方位的生物医学解决方案</p>
        </div>
        <div class="services-grid">
          <div class="service-card" v-for="service in services" :key="service.id">
            <div class="service-icon">
              <div class="icon-background"></div>
              <div class="icon-content">{{ service.icon }}</div>
            </div>
            <h3 class="service-title">{{ service.title }}</h3>
            <p class="service-description">{{ service.description }}</p>
            <div class="service-features">
              <span class="feature-tag" v-for="feature in service.features" :key="feature">
                {{ feature }}
              </span>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 研究章节 -->
    <section id="research" class="research-section" data-section="research">
      <div class="section-container">
        <div class="section-header">
          <h2 class="section-title">研究领域</h2>
          <p class="section-subtitle">探索生命科学的无限可能</p>
        </div>
        <div class="research-content">
          <div class="research-timeline">
            <div class="timeline-item" v-for="research in researchAreas" :key="research.id">
              <div class="timeline-marker"></div>
              <div class="timeline-content">
                <h3>{{ research.title }}</h3>
                <p>{{ research.description }}</p>
                <div class="research-progress">
                  <div class="progress-bar">
                    <div class="progress-fill" :style="{ width: research.progress + '%' }"></div>
                  </div>
                  <span class="progress-text">{{ research.progress }}% 完成</span>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>

    <!-- 联系章节 -->
    <section id="contact" class="contact-section" data-section="contact">
      <div class="section-container">
        <div class="section-header">
          <h2 class="section-title">联系我们</h2>
          <p class="section-subtitle">让我们一起创造未来</p>
        </div>
        <div class="contact-content">
          <div class="contact-info">
            <div class="contact-item">
              <div class="contact-icon">📍</div>
              <div class="contact-details">
                <h4>地址</h4>
                <p>北京市海淀区中关村科技园</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">📧</div>
              <div class="contact-details">
                <h4>邮箱</h4>
                <p>info@biomed.com</p>
              </div>
            </div>
            <div class="contact-item">
              <div class="contact-icon">📞</div>
              <div class="contact-details">
                <h4>电话</h4>
                <p>+86 10 1234 5678</p>
              </div>
            </div>
          </div>
          <div class="contact-form">
            <form @submit.prevent="submitForm">
              <div class="form-group">
                <input type="text" placeholder="您的姓名" required />
              </div>
              <div class="form-group">
                <input type="email" placeholder="邮箱地址" required />
              </div>
              <div class="form-group">
                <textarea placeholder="留言内容" rows="4" required></textarea>
              </div>
              <button type="submit" class="btn-primary">发送消息</button>
            </form>
          </div>
        </div>
      </div>
    </section>

    <!-- 页脚 -->
    <footer class="footer">
      <div class="footer-content">
        <div class="footer-section">
          <h4>BioMed</h4>
          <p>前沿生物医学科技创新</p>
        </div>
        <div class="footer-section">
          <h4>快速链接</h4>
          <a href="#home">首页</a>
          <a href="#about">关于我们</a>
          <a href="#services">服务</a>
          <a href="#research">研究</a>
        </div>
        <div class="footer-section">
          <h4>联系方式</h4>
          <p>info@biomed.com</p>
          <p>+86 10 1234 5678</p>
        </div>
      </div>
      <div class="footer-bottom">
        <p>&copy; 2024 BioMed. All rights reserved.</p>
      </div>
    </footer>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, onUnmounted } from 'vue'

// 响应式数据
const isScrolled = ref(false)
const currentSection = ref(0)

// 服务数据
const services = ref([
  {
    id: 1,
    icon: '🧬',
    title: '基因治疗',
    description: '利用先进的基因编辑技术，为遗传性疾病提供精准治疗方案。',
    features: ['CRISPR技术', '基因检测', '个性化治疗']
  },
  {
    id: 2,
    icon: '🔬',
    title: '细胞治疗',
    description: '基于干细胞和免疫细胞的新型治疗方法，为癌症等疾病带来希望。',
    features: ['干细胞治疗', 'CAR-T疗法', '免疫治疗']
  },
  {
    id: 3,
    icon: '💊',
    title: '药物研发',
    description: '从分子设计到临床试验，全流程的药物研发服务。',
    features: ['分子设计', '临床前研究', '临床试验']
  },
  {
    id: 4,
    icon: '🔍',
    title: '诊断技术',
    description: '先进的分子诊断技术，为疾病早期发现提供精准工具。',
    features: ['分子诊断', '生物标志物', '早期筛查']
  }
])

// 研究领域数据
const researchAreas = ref([
  {
    id: 1,
    title: '癌症免疫治疗',
    description: '开发新型免疫检查点抑制剂和CAR-T细胞疗法，提高癌症治疗效果。',
    progress: 85
  },
  {
    id: 2,
    title: '神经退行性疾病',
    description: '研究阿尔茨海默病和帕金森病的发病机制，开发神经保护药物。',
    progress: 70
  },
  {
    id: 3,
    title: '心血管疾病',
    description: '利用基因治疗和干细胞技术，修复受损的心血管组织。',
    progress: 60
  },
  {
    id: 4,
    title: '罕见病治疗',
    description: '针对罕见遗传性疾病，开发基因替代和基因编辑治疗方案。',
    progress: 45
  }
])

// 方法
const scrollToSection = (sectionId: string) => {
  const element = document.getElementById(sectionId)
  if (element) {
    element.scrollIntoView({ behavior: 'smooth' })
  }
}

const submitForm = () => {
  // 表单提交逻辑
  console.log('表单提交')
}

// 滚动处理
const handleScroll = () => {
  isScrolled.value = window.scrollY > 50
  
  const sections = document.querySelectorAll('section[data-section]')
  const scrollPosition = window.scrollY + window.innerHeight / 2
  
  sections.forEach((section, index) => {
    const rect = section.getBoundingClientRect()
    if (rect.top <= window.innerHeight / 2 && rect.bottom >= window.innerHeight / 2) {
      currentSection.value = index
    }
  })
}

// 生命周期
onMounted(() => {
  window.addEventListener('scroll', handleScroll, { passive: true })
})

onUnmounted(() => {
  window.removeEventListener('scroll', handleScroll)
})
</script>

<style scoped>
.home-page {
  min-height: 100vh;
  overflow-x: hidden;
}

/* 导航栏 */
.navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(20px);
  transition: all var(--transition-normal);
  border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.navbar-scrolled {
  background: rgba(255, 255, 255, 0.98);
  box-shadow: var(--shadow-lg);
}

.nav-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 70px;
}

.nav-logo {
  display: flex;
  align-items: center;
  gap: 12px;
}

.logo-icon {
  width: 40px;
  height: 40px;
  position: relative;
}

.dna-helix-mini {
  width: 100%;
  height: 100%;
  position: relative;
}

.dna-strand-mini {
  position: absolute;
  width: 2px;
  height: 8px;
  background: var(--primary-blue);
  border-radius: 1px;
  animation: dnaRotateMini 3s infinite linear;
}

.dna-strand-mini:nth-child(odd) {
  left: 50%;
  transform-origin: 50% 20px;
}

.dna-strand-mini:nth-child(even) {
  right: 50%;
  transform-origin: 50% 20px;
}

@keyframes dnaRotateMini {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.logo-text {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  letter-spacing: -0.5px;
}

.nav-menu {
  display: flex;
  gap: 2rem;
}

.nav-link {
  text-decoration: none;
  color: var(--gray-700);
  font-weight: 500;
  transition: all var(--transition-fast);
  position: relative;
}

.nav-link:hover,
.nav-link.active {
  color: var(--primary-blue);
}

.nav-link::after {
  content: '';
  position: absolute;
  bottom: -5px;
  left: 0;
  width: 0;
  height: 2px;
  background: var(--primary-blue);
  transition: width var(--transition-fast);
}

.nav-link:hover::after,
.nav-link.active::after {
  width: 100%;
}

/* 首页章节 */
.hero-section {
  min-height: 100vh;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}

.hero-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-primary);
}

.floating-particles {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
}

.particle {
  position: absolute;
  width: 4px;
  height: 4px;
  background: rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  animation: float 6s infinite ease-in-out;
}

.particle:nth-child(odd) {
  animation-delay: 0s;
}

.particle:nth-child(even) {
  animation-delay: 3s;
}

@keyframes float {
  0%, 100% {
    transform: translateY(0px) rotate(0deg);
    opacity: 0;
  }
  50% {
    transform: translateY(-100px) rotate(180deg);
    opacity: 1;
  }
}

.gradient-overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: radial-gradient(circle at 30% 20%, rgba(255, 255, 255, 0.1) 0%, transparent 50%);
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.hero-text {
  color: var(--white);
}

.hero-title {
  font-size: 4rem;
  font-weight: 800;
  line-height: 1.1;
  margin-bottom: 1.5rem;
}

.title-line {
  display: block;
  opacity: 0;
  transform: translateY(30px);
  animation: slideInUp 1s ease-out forwards;
}

.title-line:nth-child(2) {
  animation-delay: 0.3s;
}

@keyframes slideInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.hero-subtitle {
  font-size: 1.25rem;
  line-height: 1.6;
  margin-bottom: 2rem;
  opacity: 0.9;
  animation: fadeIn 1s ease-out 0.6s forwards;
  opacity: 0;
}

@keyframes fadeIn {
  to {
    opacity: 0.9;
  }
}

.hero-actions {
  display: flex;
  gap: 1rem;
  animation: slideInUp 1s ease-out 0.9s forwards;
  opacity: 0;
  transform: translateY(30px);
}

.btn-primary,
.btn-secondary {
  padding: 1rem 2rem;
  border: none;
  border-radius: var(--radius-lg);
  font-weight: 600;
  font-size: 1rem;
  cursor: pointer;
  transition: all var(--transition-normal);
  text-decoration: none;
  display: inline-block;
}

.btn-primary {
  background: var(--white);
  color: var(--primary-blue);
}

.btn-primary:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-xl);
}

.btn-secondary {
  background: transparent;
  color: var(--white);
  border: 2px solid var(--white);
}

.btn-secondary:hover {
  background: var(--white);
  color: var(--primary-blue);
  transform: translateY(-2px);
}

.hero-visual {
  display: flex;
  justify-content: center;
  align-items: center;
}

.molecular-structure {
  position: relative;
  width: 300px;
  height: 300px;
}

.molecule {
  position: absolute;
  width: 20px;
  height: 20px;
  background: rgba(255, 255, 255, 0.8);
  border-radius: 50%;
  animation: moleculeFloat 4s infinite ease-in-out;
}

.molecule:nth-child(odd) {
  animation-delay: 0s;
}

.molecule:nth-child(even) {
  animation-delay: 2s;
}

@keyframes moleculeFloat {
  0%, 100% {
    transform: translateY(0px) scale(1);
  }
  50% {
    transform: translateY(-20px) scale(1.1);
  }
}

.scroll-indicator {
  position: absolute;
  bottom: 2rem;
  left: 50%;
  transform: translateX(-50%);
  animation: bounce 2s infinite;
}

.scroll-arrow {
  width: 2px;
  height: 30px;
  background: var(--white);
  position: relative;
}

.scroll-arrow::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 6px solid transparent;
  border-right: 6px solid transparent;
  border-top: 8px solid var(--white);
}

@keyframes bounce {
  0%, 20%, 50%, 80%, 100% {
    transform: translateX(-50%) translateY(0);
  }
  40% {
    transform: translateX(-50%) translateY(-10px);
  }
  60% {
    transform: translateX(-50%) translateY(-5px);
  }
}

/* 通用章节样式 */
.section-container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 6rem 2rem;
}

.section-header {
  text-align: center;
  margin-bottom: 4rem;
}

.section-title {
  font-size: 3rem;
  font-weight: 700;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

.section-subtitle {
  font-size: 1.25rem;
  color: var(--gray-600);
  max-width: 600px;
  margin: 0 auto;
}

/* 关于我们章节 */
.about-section {
  background: var(--gray-50);
}

.about-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
  align-items: center;
}

.about-text h3 {
  font-size: 2rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 1.5rem;
}

.about-text p {
  font-size: 1.1rem;
  line-height: 1.7;
  color: var(--gray-700);
  margin-bottom: 2rem;
}

.stats-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2rem;
}

.stat-item {
  text-align: center;
}

.stat-number {
  font-size: 2.5rem;
  font-weight: 700;
  color: var(--primary-blue);
  margin-bottom: 0.5rem;
}

.stat-label {
  font-size: 0.9rem;
  color: var(--gray-600);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.about-visual {
  display: flex;
  justify-content: center;
}

.lab-scene {
  position: relative;
  width: 300px;
  height: 300px;
}

.microscope {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 100px;
  height: 80px;
  background: var(--primary-blue);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
}

.test-tubes {
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 1rem;
}

.tube {
  width: 20px;
  height: 60px;
  background: linear-gradient(to bottom, var(--primary-cyan), var(--accent-teal));
  border-radius: 10px 10px 0 0;
  animation: tubeGlow 3s infinite ease-in-out;
}

.tube:nth-child(odd) {
  animation-delay: 0s;
}

.tube:nth-child(even) {
  animation-delay: 1.5s;
}

@keyframes tubeGlow {
  0%, 100% {
    box-shadow: 0 0 10px rgba(8, 145, 178, 0.3);
  }
  50% {
    box-shadow: 0 0 20px rgba(8, 145, 178, 0.6);
  }
}

/* 服务章节 */
.services-section {
  background: var(--white);
}

.services-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 2rem;
}

.service-card {
  background: var(--white);
  padding: 2rem;
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-md);
  transition: all var(--transition-normal);
  border: 1px solid var(--gray-200);
}

.service-card:hover {
  transform: translateY(-8px);
  box-shadow: var(--shadow-xl);
  border-color: var(--primary-cyan);
}

.service-icon {
  position: relative;
  width: 80px;
  height: 80px;
  margin-bottom: 1.5rem;
}

.icon-background {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: var(--gradient-accent);
  border-radius: var(--radius-lg);
  opacity: 0.1;
}

.icon-content {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  font-size: 2rem;
}

.service-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

.service-description {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 1.5rem;
}

.service-features {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.feature-tag {
  background: var(--gray-100);
  color: var(--gray-700);
  padding: 0.25rem 0.75rem;
  border-radius: var(--radius-md);
  font-size: 0.875rem;
  font-weight: 500;
}

/* 研究章节 */
.research-section {
  background: var(--gray-50);
}

.research-timeline {
  position: relative;
  max-width: 800px;
  margin: 0 auto;
}

.research-timeline::before {
  content: '';
  position: absolute;
  left: 20px;
  top: 0;
  bottom: 0;
  width: 2px;
  background: var(--primary-blue);
}

.timeline-item {
  position: relative;
  margin-bottom: 3rem;
  padding-left: 60px;
}

.timeline-marker {
  position: absolute;
  left: 11px;
  top: 0;
  width: 20px;
  height: 20px;
  background: var(--primary-blue);
  border-radius: 50%;
  border: 4px solid var(--white);
  box-shadow: var(--shadow-md);
}

.timeline-content h3 {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 1rem;
}

.timeline-content p {
  color: var(--gray-600);
  line-height: 1.6;
  margin-bottom: 1rem;
}

.research-progress {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.progress-bar {
  flex: 1;
  height: 8px;
  background: var(--gray-200);
  border-radius: 4px;
  overflow: hidden;
}

.progress-fill {
  height: 100%;
  background: var(--gradient-primary);
  border-radius: 4px;
  transition: width 1s ease-out;
}

.progress-text {
  font-size: 0.875rem;
  color: var(--gray-600);
  font-weight: 500;
}

/* 联系章节 */
.contact-section {
  background: var(--white);
}

.contact-content {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4rem;
}

.contact-info {
  display: flex;
  flex-direction: column;
  gap: 2rem;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.contact-icon {
  width: 50px;
  height: 50px;
  background: var(--gradient-primary);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1.5rem;
  color: var(--white);
}

.contact-details h4 {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--gray-900);
  margin-bottom: 0.5rem;
}

.contact-details p {
  color: var(--gray-600);
}

.contact-form {
  background: var(--gray-50);
  padding: 2rem;
  border-radius: var(--radius-xl);
}

.form-group {
  margin-bottom: 1.5rem;
}

.form-group input,
.form-group textarea {
  width: 100%;
  padding: 1rem;
  border: 2px solid var(--gray-200);
  border-radius: var(--radius-lg);
  font-size: 1rem;
  transition: all var(--transition-fast);
  background: var(--white);
}

.form-group input:focus,
.form-group textarea:focus {
  outline: none;
  border-color: var(--primary-blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.1);
}

.form-group textarea {
  resize: vertical;
  min-height: 120px;
}

/* 页脚 */
.footer {
  background: var(--gray-900);
  color: var(--white);
  padding: 3rem 0 1rem;
}

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 2rem;
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 2rem;
  margin-bottom: 2rem;
}

.footer-section h4 {
  font-size: 1.2rem;
  font-weight: 600;
  margin-bottom: 1rem;
  color: var(--primary-cyan);
}

.footer-section a {
  display: block;
  color: var(--gray-300);
  text-decoration: none;
  margin-bottom: 0.5rem;
  transition: color var(--transition-fast);
}

.footer-section a:hover {
  color: var(--white);
}

.footer-section p {
  color: var(--gray-300);
  margin-bottom: 0.5rem;
}

.footer-bottom {
  text-align: center;
  padding-top: 2rem;
  border-top: 1px solid var(--gray-700);
  color: var(--gray-400);
}

/* 响应式设计 */
@media (max-width: 768px) {
  .nav-container {
    padding: 0 1rem;
  }
  
  .nav-menu {
    display: none;
  }
  
  .hero-content {
    grid-template-columns: 1fr;
    text-align: center;
    gap: 2rem;
  }
  
  .hero-title {
    font-size: 2.5rem;
  }
  
  .hero-actions {
    justify-content: center;
    flex-wrap: wrap;
  }
  
  .about-content,
  .contact-content {
    grid-template-columns: 1fr;
    gap: 2rem;
  }
  
  .stats-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .services-grid {
    grid-template-columns: 1fr;
  }
  
  .section-container {
    padding: 4rem 1rem;
  }
  
  .section-title {
    font-size: 2rem;
  }
}

/* 滚动动画 */
@media (prefers-reduced-motion: no-preference) {
  .service-card,
  .timeline-item,
  .contact-item {
    opacity: 0;
    transform: translateY(30px);
    transition: all var(--transition-normal);
  }
  
  .service-card.visible,
  .timeline-item.visible,
  .contact-item.visible {
    opacity: 1;
    transform: translateY(0);
  }
}
</style> 